<template>
  <view class="container">
    <scroll-view scroll-x="true" class="navbar">
      <view
        :class="{ navcommon: navindex == index }"
        v-for="(item, index) in navlist"
        :key="index"
        @click="changenav(index, item)"
        style="display: inline-block; text-align: center; line-height: 100rpx; padding: 0 10rpx"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <!-- <view class="navbar">
      <view :class="{ navcommon: navindex == index }" v-for="(item, index) in navlist" :key="index" @click="changenav(index, item)">{{ item.name }}</view>
    </view> -->
    <!-- 教师列表 -->
    <scroll-view scroll-y="true" style="box-sizing: border-box; width: 100%; height: 1100rpx; padding: 40rpx 28rpx" @scrolltolower="tolower">
      <view class="item" v-for="item in list" :key="item.id" @click="goteacherdetail(item.id)">
        <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx; margin: 0 4rpx"></image>
        <view class="right">
          <view class="top">
            <view style="display: flex; align-items: center; justify-content: space-between">
              <view class="name">{{ item.byname }}</view>
              <image :src="`../../static/icon/${item.gender == 1 ? 'nv' : 'nan'}.png`" mode="aspectFill" style="width: 42rpx; height: 42rpx"></image>
              <view class="zhiwei" v-if="item.identity_name != ''">{{ item.identity_name }}</view>
            </view>
            <view>{{ item.subject_name }}</view>
          </view>
          <!-- 教龄 -->
          <view style="margin: 12rpx 0 38rpx 0; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">教龄{{ item.teaching_len }}年</view>
          <view class="bottom">
            <view class="time">已学课时 {{ item.period_out + '/' + item.period_num }}</view>
            <view class="yueyuebtn" @click.stop="gojixuyuyue(item.order_id)">继续预约</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      navlist: [],
      imgUrl: '',
      navindex: 0, // 导航栏索引
      navid: '', // 导航栏id
      list: [] // 数据列表
    };
  },
  methods: {
    // 加载更多
    tolower() {
      this.page++;
      this.getmyteacherlist(this.navid);
    },
    // 获取科目列表
    async getsubject() {
      const res = await uni.$http.post('/index/subjectList', {
        name: ''
      });
      console.log('科目列表', res);
      this.navlist = res.data.data.list;
      this.navlist.unshift({
        name: '全部',
        id: ''
      });
    },
    // 切换导航
    changenav(index, item) {
      this.navindex = index;
      this.navid = item.id;
      this.list = [];
      this.getmyteacherlist(item.id);
    },
    // 获取我的教师列表
    async getmyteacherlist(id) {
      const res = await uni.$http.post('/patriarch/myTeacher', {
        subject_id: id,
        page: this.page
      });
      console.log('我的教师列表', res.data.data.list);
      if (res.data.data.list.length != 0) {
        this.list.push(...res.data.data.list);
      } else {
        uni.showToast({
          title: '数据已加载完毕',
          icon: 'none'
        });
      }
    },
    goteacherdetail(id) {
      uni.navigateTo({
        url: '/parents/teacherdetail/teacherdetail?id=' + id
      });
    },
    // 继续预约
    gojixuyuyue(id) {
      uni.navigateTo({
        url: '/parents/jixuyuyue/jixuyuyue?id=' + id
      });
    }
  },
  onLoad() {
    this.imgUrl = this.imgurl;
    // 获取教师列表
    this.getmyteacherlist();
    // 获取科目列表
    this.getsubject();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .navbar {
    box-sizing: border-box;
    white-space: nowrap;
    // display: flex;
    // align-items: center;
    // justify-content: space-evenly;
    width: 100%;
    height: 100rpx;
    background-color: #3553e8;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
  }
  .navcommon {
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    padding-bottom: 4rpx;
    border-bottom: 8rpx solid #ffffff;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    .right {
      flex: 1;
      margin-left: 18rpx;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #222222;
        }
        .zhiwei {
          box-sizing: border-box;
          width: 104rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          background: #eaedfd;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #3553e8;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
        }
        .yueyuebtn {
          box-sizing: border-box;
          width: 160rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          background: #e8ecff;
          border-radius: 100rpx 100rpx 100rpx 100rpx;
          border: 2rpx solid #3553e8;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #3553e8;
        }
      }
    }
  }
}
</style>
